import React, { Component } from 'react';
import './Myshoplist.scss'
import {category_list} from '../utils/api'
import {category_subcate} from '../utils/api'

class Myshoplist extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            count:0,
            arr:[],
            list:[],
        },
        this.handClick.bind(this);       
    }
    componentDidMount(){
        category_list().then((res)=>{
          console.log(res.data.list)
        this.setState({
            arr:res.data.list
        })
        })
     
    }

    handClick(item,index){
        this.setState({
            currentIndex:index
        })
        category_subcate({id:item.id}).then((res)=>{
            console.log(res.data)
            this.setState({
                list:res.data.subcate.subcategory
            })
        })
    }

    render() {
        return (
            <div className="big">
                <div className="left">
                    {
                        this.state.arr.map((item,index)=>{
                            return (
                               <div className={`btn ${this.state.currentIndex == index ? 'active':''}` }  key={index} onClick={ ()=>{  
                                this.handClick(item,index)  
                                }  }>{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className="right">
                        {
                        //渲染右侧列表
                        this.state.list.map((item,index)=>{
                            return (
                                <>
                            <h3>{item.name}</h3>
                            <div className="ha">
                            {
                                 this.state.list[index].subNavs.map((item,index)=>{
                                     return (
                                         
                                            <div key={index} className="item">
                                                <img src={item.pic} alt="" />
                                                <div className="name">{item.name}</div>
                                            </div>
                                        

                                     )
                                 })
                             }
                            </div>                            
                             </>

                            )
                        })
                        }
                </div>
            </div>
        );
    }
}

export default Myshoplist;